<script lang="ts">
import { defineComponent, ref } from "vue";
import { chooseMedia } from "@/utils/meida";

import PopupBottom from "@/components/popup/bottom.vue";

export default defineComponent({
  components: { PopupBottom },
  setup() {
    let pickerCallback:
      | ((type: number, filePath?: string) => void)
      | undefined = undefined;

    const visible = ref(false);

    const typeClick = (type: number) => {
      if (type === 2) {
        chooseMedia({ count: 1, mediaType: ["video"] }, (resp) => {
          pickerCallback?.(type, resp[0].tempFilePath);
          visible.value = false;
        });
      } else {
        pickerCallback?.(type);
        visible.value = false;
      }
    };

    const show = (callback: (type: number, filePath?: string) => void) => {
      visible.value = true;
      pickerCallback = callback;
    };
    return { visible, typeClick, show };
  },
});
</script>

<template>
  <PopupBottom v-model="visible" title="选择发布类型">
    <view class="note-picker">
      <view class="note-picker-item" @click="typeClick(1)">
        <image class="note-picker-icon" src="/static/community-note-type.png" />
        <view class="note-picker-text">图文笔记</view>
      </view>
      <view class="note-picker-item" @click="typeClick(2)">
        <image
          class="note-picker-icon"
          src="/static/community-note-type2.png"
        />
        <view class="note-picker-text">视频笔记</view>
      </view>
      <view class="note-picker-item" @click="typeClick(3)">
        <image
          class="note-picker-icon"
          src="/static/community-note-type3.png"
        />
        <view class="note-picker-text">长笔记</view>
      </view>
    </view>
  </PopupBottom>
</template>

<style lang="scss">
.note-picker {
  display: flex;
  justify-content: center;
  padding-top: 40rpx;
  padding-bottom: 40rpx;

  .note-picker-item {
    margin: 0 40rpx;
  }

  .note-picker-icon {
    display: block;
    width: 124rpx;
    height: 124rpx;
    margin-bottom: 10rpx;
  }

  .note-picker-text {
    font-size: 28rpx;
    color: #333333;
    line-height: 40rpx;
    text-align: center;
  }
}
</style>
